import React, { Component } from 'react'
import { BasicLayout, BasicLayoutSearch } from '../../../components/BasicLayout'
import { BasicPagination, compareNum, TableCustomize, openSuccessModal, openModalMessage } from '../../../components/TableCustomize'
import { Button } from 'antd'
import TopInquire from './TopInquire'
import * as FinishRecords from '../../../axios/FinishRecord'
import { withPermission } from '../../../components/withpermission'
const RefreshButton = withPermission(Button, 'sync')
const CHFButton = withPermission(Button, 'cuihuifu')
const BJButton = withPermission(Button, 'bianjijiaoqi')
const TJButton = withPermission(Button, 'tijiaoqianliao')
const PrintButton = withPermission(Button, 'printer')
export default class FinishRecord extends Component {
    state = {
        columns: [
            {
                title: '序号',
                dataIndex: 'serialNumber',
                render: (text, record, index) =>
                    <div style={{ display: 'flex' }}>
                        <div>{index + 1}</div>
                    </div>,
                align: 'center',
                width: 50,
            },
            {
                title: '批号',
                dataIndex: 'batch',
                sorter: (a, b) => compareNum(a.batch, b.batch),
                width: 100,
            },
            {
                title: '机型',
                dataIndex: 'type',
                sorter: (a, b) => compareNum(a.type, b.type),
                width: 180,
            },
            {
                title: '数量',
                dataIndex: 'getMark',
                sorter: (a, b) => compareNum(a.getMark, b.getMark),
                width: 150,
            },

            {
                title: '装配车间',
                dataIndex: 'getWorkshop',
                sorter: (a, b) => compareNum(a.getWorkshop, b.getWorkshop),
                width: 100,
            },
            {
                title: '装配班组',
                dataIndex: 'get1',
                sorter: (a, b) => compareNum(a.get1, b.get1),
                width: 100,
            },
            {
                title: '第一交机时间',
                dataIndex: 'get2',
                sorter: (a, b) => compareNum(a.get1, b.get1),
                width: 150,
            },
            {
                title: '第一出机时间',
                dataIndex: 'get3',
                sorter: (a, b) => compareNum(a.get1, b.get1),
                width: 150,
            },
            {
                title: '申请入库时间',
                dataIndex: 'get4',
                sorter: (a, b) => compareNum(a.get1, b.get1),
                width: 150,
            },
            {
                title: '申请人',
                dataIndex: 'get5',
                width: 80,
                sorter: (a, b) => compareNum(a.get1, b.get1),
            },
            {
                title: '入库类型',
                dataIndex: 'get15',
                width: 100,
            },
            {
                title: '入库类型',
                dataIndex: 'get151',
                width: 100,
            },
            { dataIndex: '' }
        ],
        dataSource: [
        ],
        advanced: false,
        selectedRows: [],
        paging: {},
        loginFlag: false,
        values: {}
    }
    // 挂载前
    UNSAFE_componentWillMount() {
        this.fetch()
    }
    componentWillUnmount() {
        this.setState = () => {
            return;
        };
    }
    //初始化加载数据
    fetch = (page = 1, size = 100) => {
        const { values } = this.state
        this.setState({
            // loading: true,
            paging: { pageNum: page, pageSize: size }
        })
        let a = { pageNum: page, pageSize: size }
        this.search({ ...values, ...a })
    }
    // 查询接口
    search = (value, paging) => {
        FinishRecords.productWarehousingRecord({ ...value, ...paging }).then((item) => {
            console.log('查询数据', item);
            if (item.data.code === 200) {
                this.setState({
                    loading: false,
                    dataSource: item.data.data.data,
                    // 操作后清除选中
                    selectedRowKeys: [],
                    selectedRows: [],
                    some: null,
                    paging: {
                        pageNum: item.data.data.pageNum,
                        pageSize: item.data.data.pageSize,
                        total: item.data.data.total,
                    }
                })
            } else {
                openModalMessage('error', item.data.msg)
            }
        })
    }

    // 高级查询
    advancedss = () => {
        console.log('高级查询');
        this.setState({ advanced: !this.state.advanced })
    }
    // 刷新
    refresh = () => {
        console.log('刷新');

        this.forceUpdate();
    }
    // 查询
    handleSearch = value => {
        console.log('查询', value)
        this.setState({ values: value, paging: { pageNum: 1, pageSize: 10 } });
        this.search({ ...value, pageNum: 1, pageSize: 10 })
    };
    // 重置
    cz = () => {
        console.log('重置');
        this.setState({
            values: null
        }, () => { this.fetch() })
    }
    render() {
        const { paging, columns, loading, dataSource, advanced } = this.state
        const rowSelection = {
            onChange: (selectedRowKeys, selectedRows) => {
                console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
                this.setState({
                    selectedRows: selectedRows
                })
            },
        }
        return (
            <div>
                <BasicLayoutSearch>
                    <TopInquire onSearch={this.handleSearch}
                        onClick4={this.advancedss}
                        advanced={advanced}
                        onClick={this.cz}
                    ></TopInquire>
                </BasicLayoutSearch>
                <BasicLayout
                    name='成品机入库记录'
                    icon="table"
                    buttons={[
                        <RefreshButton key={1} onClick={() => this.refresh()} icon='sync' />,
                        // <PrintButton key={2} onClick={() => this.print()} />,
                        // <TJButton key={3} onClick={() => this.putIn()} />,
                        // <BJButton key={4} onClick={() => this.redact()} />,
                        // <CHFButton key={5} onClick={() => this.urge()} />,

                        // <Button key={1} onClick={this.refresh} type='primary'>刷新</Button>
                    ]}
                >
                    <TableCustomize
                        rowSelection={rowSelection}
                        columns={columns}
                        rowKey={(record) => record.id}
                        dataSource={dataSource}
                        pagination={false}
                        loading={loading}
                        allowDrafting={true}
                        allowEditable={this.loadData}
                        rowClassName={(record, index) => {
                            return (['editable-row', index % 2 === 0 ? 'editable-row' : 'editable-row12'])
                        }}
                    >
                    </TableCustomize>
                    <BasicPagination pageNum={paging.pageNum} pageSize={paging.pageSize} total={paging.total} loadData={this.fetch} />
                </BasicLayout>
            </div>
        )
    }
}
